<template>
  <view class="price-component">
    <view class="new">
      <text class="unit">￥</text>{{ price }}
    </view>
    <view class="old">
      <text class="unit">￥</text>
      <text>{{ oldPrice }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    price: {
      type: Number
    },
    oldPrice: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped lang="scss">
.price-component {
  height: 70rpx;
  line-height: 70rpx;
  //font-size: 24rpx;
  view {
    display: inline-block;
    &.old {
      margin-left: 10rpx;
      text-decoration: line-through;
      color: #ccc;
      .unit {
        font-size: $unit;
      }
    }
    &.new {
      font-size: $price;
      font-weight: 700;
      color: red;
      .unit {
        font-size: $unit;
      }
    }
  }
}
</style>
